<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令实践</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-text-box="msg"></div>
</div>


<script>
    //定义全局的指令
    //函数式
    Vue.directive('text-box' , function (elem , bind){
        console.log(elem)
        console.log(bind)
        elem.innerHTML = bind.value
        elem.style.width = '200px'
        elem.style.height = '200px'
        elem.style.backgroundColor = 'red'
    })

     const vm = new Vue({
             el : '#app',
             //Model M
             data : {
                 msg : '自定义指令实践'
             }
         })
</script>

</body>
</html>